//这个文件是用来创建工程化项目的！！！gulpfile.js
//运行之后浏览器出现Cannot GET /，/代表没有返回数据

const gulp = require('gulp')

const server = require('gulp-webserver')

// const watch = require('gulp-watch')

const sass = require('gulp-sass')

const webpack = require('webpack-stream')

const proxy = require('http-proxy-middleware')
//这些是引入的我们刚刚安装的模块,这是代理中间件,这个很重要

// gulp与webpack区别：gulp是一个自动化任务执行工具，webpack,模块打包工具

//开启了一个gulp.task 工程化任务
gulp.task('server', () => {
  return gulp.src('./dev')
  //处理完之后，会在src文件夹下面生成一个/dev文件夹
  //最后这个服务就在这个dev文件中运行
    .pipe(
      server({
        host: 'localhost',
        port: 8080,
        //服务的域名是本地的8080端口
        livereload: true,
        directoryListing: {
          enable: true,
          path: '/index.html'
        },
        middleware: [
          //中间件
          proxy('/api', {
            //代理(只要路径里有/api的,那么我就直接发送到3000里去了!
            target: 'http://localhost:3000',
            // changeOrigin: true
          })
        ]
      })
    )
})

gulp.task('scss', () => {
  return gulp.src('./src/styles/app.scss',{allowEmpty: true})
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dev/styles'))
})

// commonjs：JS模块化开发
gulp.task('js', () => {
  return gulp.src('./src/scripts/*.js')
    .pipe(
      webpack({
        // webpack v4 要求定义配置模式：development, production
        mode: 'development',
        //入口
        entry: './src/scripts/app.js',
        // 出口
        output: {
          filename: 'app.js'
        },
        // loader
        module: {
          rules: [
            {
              test: /\.html$/,
              //专门匹配html文件
              use: 'string-loader'
              //用string-loader这个装载器来处理这个类型
            }
          ]
        } 
      })
    )
    .pipe(gulp.dest('./dev/scripts'))
    //运行完之后会被打包到dev下面的这个文件夹之中
})

gulp.task('watchother', () => {
  gulp.watch('./src/*.html',gulp.series("copyhtml"))
//监听这些文件夹的变动，一旦更改了，就会加载下面的任务series（系列）


  gulp.watch('./src/scripts/**/*', gulp.series("js"))

  gulp.watch('./src/styles/**/*',gulp.series("scss"))
})

gulp.task('copyhtml', () => {
  return gulp.src('./src/*.html')
    .pipe(gulp.dest('./dev/'))
})

gulp.task('copylibs', () => {
  return gulp.src('./src/libs/**/*')
    .pipe(gulp.dest('./dev/libs/'))
})

gulp.task('copyassets', () => {
  return gulp.src('./src/static/**/*')
    .pipe(gulp.dest('./dev/static/'))
})

gulp.task('default', gulp.series(['copyhtml', 'copylibs', 'copyassets', 'scss', 'js', 'server', 'watchother'], () => {
  console.log('server is running at localhost:8080.')
}))